<template>
  <div class="app-container">
    <div class="filter-container">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="姓名335">
        <el-input v-model="student_name" placeholder="学生的名字"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="student_id" placeholder="学生的学号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="add_menu=true">添加</el-button>
      </el-form-item>
    </el-form>
    </div>

    <!--弹出框 添加学生基本信息-->
    <el-dialog title="添加学生基本信息" :visible.sync="add_menu">
      <el-form :model="add_form">
        <el-form-item label="学生名字" :label-width="formLabelWidth">
          <el-input v-model="add_form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth">
          <el-select v-model="add_form.region" placeholder="家庭住址">
            <el-option label="幸福公馆" value="shanghai"></el-option>
            <el-option label="凯旋国际" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add_menu = false">取 消</el-button>
        <el-button type="primary" @click="add_menu = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改学生基本信息" :visible.sync="modify_student_menu">
      <el-form :model="add_form">
        <el-form-item label="学生名字" :label-width="formLabelWidth">
          <el-input v-model="add_form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth">
          <el-select v-model="add_form.region" placeholder="家庭住址">
            <el-option label="幸福公馆" value="shanghai"></el-option>
            <el-option label="凯旋国际" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add_menu = false">取 消</el-button>
        <el-button type="primary" @click="add_menu = false">确 定</el-button>
      </div>
    </el-dialog>



    <el-table :data="list" v-loading.body="listLoading" row-dblclick="modify_student_menu=true"
              element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='学号' width="95">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="性别" width="110" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column label="出生年月" width="110" align="center">
        <template slot-scope="scope">
          {{scope.row.pageviews}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="性格特点" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="备注" width="200">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span>{{scope.row.display_time}}</span>
      </template>
    </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="150  ">
        <template slot-scope="scope">
          <el-button type="warning" @click="deleteStudent" size="mini">删除</el-button>
          <el-button type="success" @click="modify_student_menu=true" size="mini">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  data() {
    return {
      add_menu: false,
      modify_student_menu: false,
      student_name: '',
      student_id: '',
      formLabelWidth: '100px',
      list: null,
      listLoading: true,
      add_form: {
        name: '',
        region: '' }
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    deleteStudent() {
      alert('delete')
    },
    search() {
      alert('111')
    },
    add() {
      alert('111')
    },
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
